<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scroll box</title>
<script src="../../jQuery/jquery_1.4.2.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(function(){
	var scro_zoom = parseInt($(".scro_mouse").width()/2);
	var scro = $("#scro");
	var scroWidth = parseInt($("#scro").width());
	var scroImgWidth = parseInt($(".scro_img ul li").width());
	var scroMouse = parseInt($(".scro_mouse").width());
	var scroMove = $(".scro_img ul");
	var scroImgLength = $(".scro_img ul li").length;
	var scroImgBoxWidth = scroImgWidth * scroImgLength + scroImgLength * 10 + 10;
	var zoompos = {x:0,y:0};
	var flag = false;
	var scropos;
	scroMove.css("width",scroImgBoxWidth + "px");
	
	$(".scro_mouse").bind({
		mousedown:function(e){
			flag = true;
			$(this).css("background","blue");
			$(".show").fadeIn(300);
		}
	})
	
	$(document).bind({
		mousemove:function(e){
			$(".scro_mouse").stop().clearQueue();
			if(flag){
				$zoompos(e.pageX,e.pageY);
				$('.scro_mouse').css("left",zoompos.x);
				scroMove.css("left",-scropos + "px");
			}
		},
		mouseup:function(e){
			flag = false;
			$(".show").hide();
			$(".scro_mouse").css("background","#ccc");
		}
	})
	
	
	
	function $zoompos(x,y){
		zoompos.x = x - scro.offset().left - scro_zoom; //得到left值;
		zoompos.y = y - scro.offset().top - 5;//得到top值;
		scropos = parseInt((scroImgBoxWidth - scroWidth) / (scroWidth - scroMouse) * zoompos.x);
		if(zoompos.x <= 0){
			zoompos.x = 0;
		}
		if(zoompos.x + scroMouse >= scroWidth){
			zoompos.x = scroWidth - scroMouse;
		}
		if(scropos < 0){
			scropos = 0;
		}
		if(scropos >= scroImgBoxWidth - scroWidth){
			scropos = scroImgBoxWidth - scroWidth;
		}
		$(".show").text( zoompos.x + "," + zoompos.y + "," + $(".scro_mouse").css("left"));
	}
})
</script>
<style type="text/css">
	*{ margin:0; padding:0;}
	#box{ width:460px; border:1px solid #000; margin:50px auto;}
	#scro{ width:100%; height:30px; background:red; margin:10px 0; position:relative;}
	.scro_line{ width:100%; height:0; overflow:hidden; border-top:2px groove #000; position:absolute; left:0; top:15px; z-index:0;}
	.scro_mouse{ width:66px; height:20px; background:#ccc; cursor:pointer; position:absolute; left:0; top:5px; z-index:1;}
	.show{ width:100px; height:30px; position:absolute; display:none; top:-30px; left:0;}
	.scro_img{ width:460px; height:60px; margin:10px 0; overflow:hidden; position:relative;}
	.scro_img ul{ position:absolute; left:0; top:0;}
	.scro_img ul li{ display:inline; float:left; width:80px; height:60px; margin-left:10px; background:red;}
</style>
</head>
<body>
    <div id="box">
    	<div class="scro_img">
        	<ul>
            	<li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
            </ul>
        </div>
        
        <div id="scro">
        	<div class="show"></div>
        	<div class="scro_line"></div>
        	<div class="scro_mouse"></div>
        </div>
        <div class="text"></div>
    </div>
</body>
</html>